<template>
  <view class="order-list-container">
    <!-- 导航栏 -->
    <ob-navbar
      title="我的订单"
      :show-back="true"
      :prevent-default-back="true"
      @left-click="handleBack"
    />

    <!-- 订单状态筛选 -->
    <view class="status-tabs">
      <scroll-view class="tabs-scroll" scroll-x="true" show-scrollbar="false">
        <view class="tabs-list">
          <view
            v-for="(tab, index) in statusTabs"
            :key="index"
            class="tab-item"
            :class="{ 'tab-active': currentStatus === tab.value }"
            @click="switchStatus(tab.value)"
          >
            <text class="tab-text">{{ tab.label }}</text>
            <view v-if="tab.count > 0" class="tab-badge">{{ tab.count }}</view>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 搜索框 -->
    <view class="search-section">
      <view class="search-box">
        <input
          class="search-input"
          type="text"
          v-model="searchKeyword"
          placeholder="搜索订单号"
          @confirm="searchOrders"
          @input="onSearchInput"
        />
        <text class="search-btn" @click="searchOrders">搜索</text>
      </view>
    </view>

    <!-- 订单列表 -->
    <scroll-view
      class="order-content"
      scroll-y="true"
      :refresher-enabled="true"
      :refresher-triggered="isRefreshing"
      @refresherrefresh="onRefresh"
      @scrolltolower="loadMoreOrders"
    >
      <view class="order-list">
        <view
          v-for="(order, index) in orders"
          :key="order.id"
          class="order-item"
          @click="goToOrderDetail(order.id)"
        >
          <!-- 订单头部 -->
          <view class="order-header">
            <view class="order-info">
              <text class="order-number">订单号：{{ order.orderNo }}</text>
              <text class="order-time">{{ formatTime(order) }}</text>
            </view>
            <view class="order-status" :class="getStatusClass(order.status)">
              <text class="status-text">{{ getStatusText(order.status) }}</text>
            </view>
          </view>

          <!-- 订单内容 -->
          <view class="order-body">
            <view class="order-details">
              <text v-if="order.remark" class="detail-item"
                >备注：{{ order.remark }}</text
              >
            </view>
          </view>

          <!-- 订单底部 -->
          <view class="order-footer">
            <view class="order-amount">
              <text class="amount-label">订单金额：</text>
              <text class="amount-value"
                >¥{{ formatPrice(order.totalAmount) }}</text
              >
            </view>
            <view class="order-actions">
              <button
                v-if="order.status === 1"
                class="action-btn primary"
                @click.stop="payOrder(order.id)"
              >
                立即支付
              </button>
              <button
                v-if="order.status === 4"
                class="action-btn secondary"
                @click.stop="buyAgain(order.id)"
              >
                再次购买
              </button>
            </view>
          </view>
        </view>
      </view>

      <!-- 加载更多 -->
      <view v-if="hasMoreOrders" class="load-more">
        <text class="load-more-text">{{
          isLoadingMore ? "加载中..." : "加载更多订单"
        }}</text>
      </view>

      <!-- 没有更多 -->
      <view v-else-if="orders.length > 0" class="no-more">
        <text class="no-more-text">已显示全部订单</text>
      </view>

      <!-- 空状态 -->
      <view v-if="orders.length === 0 && !isLoading" class="empty-state">
        <ob-empty
          :image="'/static/images/empty-order.png'"
          title="暂无订单"
          description="快去选购心仪的商品吧"
        />
        <button class="go-shopping-btn" @click="goShopping">
          <text class="btn-text">去购物</text>
        </button>
      </view>
    </scroll-view>

    <!-- 加载组件 -->
    <ob-loading :visible="isLoading" text="加载中..." />
  </view>
</template>

<script setup>
import { ref, computed, inject, onMounted } from "vue";
import { formatDistanceToNow } from "../../utils/common.js";
import orderApi from "../../api/order.js";
import request from "../../utils/request.js";

// 全局状态
const store = inject("$store");

// 响应式数据
const orders = ref([]);
const currentStatus = ref("all");
const isLoading = ref(false);
const isRefreshing = ref(false);
const isLoadingMore = ref(false);
const hasMoreOrders = ref(true);
const currentPage = ref(1);
const searchKeyword = ref("");

// 订单状态选项卡 - 根据数据库order_status字段对应
const statusTabs = ref([
  { label: "全部", value: "all", count: 0 },
  { label: "待付款", value: "pending", count: 0 }, // 数据库状态: 1
  { label: "配货中", value: "confirmed", count: 0 }, // 数据库状态: 2
  { label: "已完成", value: "completed", count: 0 }, // 数据库状态: 4
  { label: "已取消", value: "cancelled", count: 0 }, // 数据库状态: 5
]);

// 页面加载
onMounted(() => {
  // 从路由参数获取初始状态
  const pages = getCurrentPages();
  const currentPageInfo = pages[pages.length - 1];
  const options = currentPageInfo.options;

  if (options.status) {
    // 处理多状态参数（如 "1,2"）
    // 将数字状态映射为字符串状态 - 根据数据库order_status字段
    const statusMap = {
      1: "pending", // 待付款 (数据库状态1)
      2: "confirmed", // 配货中 (数据库状态2)
      4: "completed", // 已完成 (数据库状态4)
      5: "cancelled", // 已取消 (数据库状态5)
    };
    currentStatus.value = statusMap[options.status] || "all";
  }

  loadOrders(true);
  loadOrderCounts();
});

// 加载订单列表
const loadOrders = async (reset = false) => {
  try {
    if (reset) {
      isLoading.value = true;
      currentPage.value = 1;
      orders.value = [];
    } else {
      isLoadingMore.value = true;
    }

    const params = {
      page: currentPage.value,
      size: 10,
    };

    // 添加状态筛选，将字符串状态映射为数字状态 - 根据数据库order_status字段
    if (currentStatus.value && currentStatus.value !== "all") {
      const statusMap = {
        pending: 1, // 待付款 (数据库状态1)
        confirmed: 2, // 配货中 (数据库状态2)
        completed: 4, // 已完成 (数据库状态4)
        cancelled: 5, // 已取消 (数据库状态5)
      };
      params.status = statusMap[currentStatus.value];
    }

    // 添加搜索关键词
    if (searchKeyword.value.trim()) {
      params.orderNo = searchKeyword.value.trim();
    }

    const response = await orderApi.getUserOrders(params);

    // 适配API返回的数据结构
    let orderData = [];
    let hasMoreData = false;

    if (response && response.orders) {
      // 响应拦截器处理后的数据结构: { orders: [...], current: 1, pages: 0 }
      const rawOrders = response.orders || [];
      // 字段映射：将API字段映射为前端期望的字段
      orderData = rawOrders.map((order) => ({
        id: order.orderId,
        orderNo: order.orderNo,
        status: order.orderStatus,
        totalAmount: order.totalAmount,
        createdAt: order.createTime,
        completedAt: order.completedTime,
        shippedAt: order.shippedTime,
        confirmedAt: order.confirmedTime,
        shippingAddress: order.shippingAddress,
        contactPhone: order.captainPhone,
        remark: order.remark || "",
      }));
      hasMoreData = response.current < response.pages;
    } else if (response && response.data && response.data.orders) {
      // 未经响应拦截器处理的原始数据结构
      const rawOrders = response.data.orders || [];
      orderData = rawOrders.map((order) => ({
        id: order.orderId,
        orderNo: order.orderNo,
        status: order.orderStatus,
        totalAmount: order.totalAmount,
        createdAt: order.createTime,
        completedAt: order.completedTime,
        shippedAt: order.shippedTime,
        confirmedAt: order.confirmedTime,
        shippingAddress: order.shippingAddress,
        contactPhone: order.captainPhone,
        remark: order.remark || "",
      }));
      hasMoreData = response.data.current < response.data.pages;
    } else if (response && Array.isArray(response)) {
      // 直接返回数组的情况
      orderData = response;
      hasMoreData = response.length >= params.size;
    }

    if (reset) {
      orders.value = orderData;
    } else {
      orders.value.push(...orderData);
    }

    hasMoreOrders.value = hasMoreData;
  } catch (error) {
    console.error("加载订单列表失败:", error);
    uni.showToast({
      title: "加载失败",
      icon: "none",
    });
  } finally {
    isLoading.value = false;
    isRefreshing.value = false;
    isLoadingMore.value = false;
  }
};

// 加载订单数量统计
const loadOrderCounts = async () => {
  try {
    const response = await orderApi.getOrderStatistics();

    // 适配API返回的数据结构
    let statisticsData = {};

    if (response && typeof response === "object") {
      // 响应拦截器处理后的数据或直接返回的数据
      statisticsData = response;
    }

    // 更新状态选项卡的数量 - 根据数据库order_status字段
    statusTabs.value.forEach((tab) => {
      if (tab.value === "all") {
        tab.count = statisticsData.total || 0;
      } else if (tab.value === "pending") {
        tab.count = statisticsData.pending || 0; // 数据库状态1
      } else if (tab.value === "confirmed") {
        tab.count = statisticsData.confirmed || statisticsData.processing || 0; // 数据库状态2
      } else if (tab.value === "completed") {
        tab.count = statisticsData.completed || 0; // 数据库状态4
      } else if (tab.value === "cancelled") {
        tab.count = statisticsData.cancelled || 0; // 数据库状态5
      }
    });
  } catch (error) {
    console.error("加载订单统计失败:", error);
  }
};

// 切换订单状态
const switchStatus = (status) => {
  if (currentStatus.value !== status) {
    currentStatus.value = status;
    loadOrders(true);
  }
};

// 下拉刷新
const onRefresh = () => {
  isRefreshing.value = true;
  Promise.all([loadOrders(true), loadOrderCounts()]).finally(() => {
    isRefreshing.value = false;
  });
};

// 加载更多
const loadMoreOrders = () => {
  if (!isLoadingMore.value && hasMoreOrders.value) {
    currentPage.value++;
    loadOrders(false);
  }
};

// 搜索输入处理
const onSearchInput = () => {
  // 可以添加防抖逻辑
};

// 搜索订单
const searchOrders = () => {
  loadOrders(true);
};

// 格式化时间 - 根据订单状态显示对应的时间
const formatTime = (order) => {
  let timestamp = order.createdAt;
  let prefix = "下单时间：";

  // 根据订单状态显示对应的时间 - 根据数据库order_status字段
  if (order.status === 4 && order.completedAt) {
    // 已完成状态显示完成时间
    timestamp = order.completedAt;
    prefix = "完成时间：";
  } else if (order.status === 2 && order.confirmedAt) {
    // 配货中状态显示确认时间
    timestamp = order.confirmedAt;
    prefix = "确认时间：";
  } else if (order.status === 1) {
    // 待付款状态显示下单时间
    prefix = "下单时间：";
  }

  if (!timestamp) return "时间未知";

  const date = new Date(timestamp);
  const timeStr = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(
    2,
    "0"
  )}-${String(date.getDate()).padStart(2, "0")} ${String(
    date.getHours()
  ).padStart(2, "0")}:${String(date.getMinutes()).padStart(2, "0")}`;

  return prefix + timeStr;
};

// 格式化价格
const formatPrice = (price) => {
  if (!price) return "0.00";
  return Number(price).toFixed(2);
};

// 获取状态样式类 - 根据数据库order_status字段
const getStatusClass = (status) => {
  const classMap = {
    1: "status-pending", // 待付款 (数据库状态1)
    2: "status-confirmed", // 配货中 (数据库状态2)
    4: "status-completed", // 已完成 (数据库状态4)
    5: "status-cancelled", // 已取消 (数据库状态5)
  };
  return classMap[status] || "";
};

// 获取状态文本 - 根据数据库order_status字段
const getStatusText = (status) => {
  const textMap = {
    1: "待付款", // 数据库状态1
    2: "配货中", // 数据库状态2
    4: "已完成", // 数据库状态4
    5: "已取消", // 数据库状态5
  };
  return textMap[status] || "未知状态";
};

// 是否可以退款
const canRefund = (status) => {
  return [2, 3, 4].includes(status); // 配货中、送货中、已完成可以申请退款
};

// 订单操作
const cancelOrder = (orderId) => {
  uni.showModal({
    title: "确认取消",
    content: "确定要取消这个订单吗？",
    confirmText: "确定",
    cancelText: "取消",
    success: async (res) => {
      if (res.confirm) {
        try {
          await orderApi.cancelOrder(orderId, "用户主动取消");
          uni.showToast({
            title: "订单已取消",
            icon: "success",
          });
          // 刷新列表
          loadOrders(true);
          loadOrderCounts();
        } catch (error) {
          console.error("取消订单失败:", error);
          uni.showToast({
            title: "取消失败",
            icon: "none",
          });
        }
      }
    },
  });
};

// 支付订单
const payOrder = async (orderId) => {
  try {
    // 根据订单ID获取订单详情
    const orderDetail = orders.value.find(order => order.id === orderId);
    if (!orderDetail) {
      uni.showToast({
        title: "订单信息不存在",
        icon: "none",
      });
      return;
    }

    uni.showModal({
      title: "支付订单",
      content: "确定要支付此订单吗？",
      success: async (res) => {
        if (res.confirm) {
          try {
            uni.showLoading({
              title: "正在创建支付...",
              mask: true,
            });

            // 调用支付宝支付接口
            const paymentResponse = await request.post('/user/alipay/create', {
              orderNo: orderDetail.orderNo,
              amount: orderDetail.totalAmount.toString(),
              subject: '海关商品支付'
            });

            uni.hideLoading();

            if (paymentResponse) {
              // 支付宝返回的是HTML表单，可以选择在当前页面显示或新窗口打开
              const paymentForm = paymentResponse;
              
              // 方式1：在当前页面直接显示支付表单（推荐）
              // 创建一个临时的div容器来显示支付表单
              const paymentContainer = document.createElement('div');
              paymentContainer.innerHTML = paymentForm;
              paymentContainer.style.position = 'fixed';
              paymentContainer.style.top = '0';
              paymentContainer.style.left = '0';
              paymentContainer.style.width = '100%';
              paymentContainer.style.height = '100%';
              paymentContainer.style.zIndex = '9999';
              paymentContainer.style.backgroundColor = 'white';
              document.body.appendChild(paymentContainer);
              
              // 添加关闭按钮
               const closeButton = document.createElement('button');
               closeButton.innerHTML = '关闭支付';
               closeButton.style.position = 'absolute';
               closeButton.style.top = '10px';
               closeButton.style.right = '10px';
               closeButton.style.zIndex = '10000';
               closeButton.style.padding = '10px 20px';
               closeButton.style.backgroundColor = '#ff4757';
               closeButton.style.color = 'white';
               closeButton.style.border = 'none';
               closeButton.style.borderRadius = '5px';
               closeButton.style.cursor = 'pointer';
               closeButton.onclick = () => {
                 document.body.removeChild(paymentContainer);
                 // 刷新订单列表以获取最新状态
                 loadOrders(true);
                 loadOrderCounts();
               };
               paymentContainer.appendChild(closeButton);
               
               // 自动提交支付表单
               const form = paymentContainer.querySelector('form');
               if (form) {
                 form.submit();
               }
              
              // 方式2：如果需要在新窗口打开，可以取消注释下面的代码
              // const newWindow = window.open('', '_blank');
              // newWindow.document.write(paymentForm);
              // newWindow.document.close();
              
              // 支付创建成功后，刷新订单列表
              setTimeout(() => {
                loadOrders(true);
                loadOrderCounts();
              }, 2000);
            } else {
              console.error('支付创建失败:', paymentResponse);
              uni.showToast({
                title: '支付创建失败',
                icon: 'none'
              });
            }
          } catch (paymentError) {
            uni.hideLoading();
            console.error('调用支付接口失败:', paymentError);
            uni.showToast({
              title: paymentError.message || '支付调用失败',
              icon: 'none'
            });
          }
        }
      },
    });
  } catch (error) {
    console.error('支付订单失败:', error);
    uni.showToast({
      title: error.message || '支付失败，请重试',
      icon: 'none'
    });
  }
};

// 再次购买
const buyAgain = async (orderId) => {
  uni.showModal({
    title: "再次购买",
    content: "确定要再次购买此订单中的商品吗？",
    success: async (res) => {
      if (res.confirm) {
        try {
          uni.showLoading({
            title: "处理中...",
            mask: true,
          });

          // 调用再次购买API
          await orderApi.reorder(orderId);

          uni.hideLoading();
          uni.showToast({
            title: "已添加到购物车",
            icon: "success",
          });

          // 跳转到购物车页面
          setTimeout(() => {
            uni.switchTab({
              url: "/pages/cart/index",
              fail: () => {
                // 如果购物车页面不存在，跳转到首页
                uni.switchTab({
                  url: "/pages/index/index",
                });
              },
            });
          }, 1500);
        } catch (error) {
          uni.hideLoading();
          console.error("再次购买失败:", error);
          uni.showToast({
            title: error.message || "操作失败",
            icon: "none",
          });
        }
      }
    },
  });
};

// 页面跳转
const goToOrderDetail = (orderId) => {
  uni.navigateTo({
    url: `/pages/order/detail?orderId=${orderId}&from=order`,
  });
};

const goShopping = () => {
  uni.switchTab({
    url: "/pages/index/index",
  });
};

// 处理返回按钮 - 统一返回到“我的”页
const handleBack = () => {
  // 统一跳转到“我的”页（tabbar），避免历史栈差异导致的不一致
  uni.switchTab({
    url: "/pages/profile/index",
    fail: () => {
      // 个别端若未配置为tab或跳转失败，则降级为redirect
      uni.redirectTo({ url: "/pages/profile/index" });
    }
  });
};
</script>

<style lang="scss" scoped>
.order-list-container {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.status-tabs {
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  padding: 15px 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.tabs-scroll {
  padding: 0 20px;
}

.tabs-list {
  display: flex;
  gap: 40px;
  align-items: center;
}

.tab-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  white-space: nowrap;
  padding: 8px 0;
  transition: all 0.3s ease;

  &.tab-active {
    .tab-text {
      color: var(--primary-color);
      font-weight: 600;
      transform: scale(1.05);
    }

    &::after {
      content: "";
      position: absolute;
      bottom: -15px;
      left: 50%;
      transform: translateX(-50%);
      width: 20px;
      height: 3px;
      background: var(--primary-color);
      border-radius: 2px;
    }
  }
}

.tab-text {
  font-size: 16px;
  color: #64748b;
  line-height: 1.5;
  transition: all 0.3s ease;
  font-weight: 500;
}

.tab-badge {
  position: absolute;
  top: -5px;
  right: -15px;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #ffffff;
  font-size: 10px;
  padding: 3px 7px;
  border-radius: 12px;
  min-width: 18px;
  text-align: center;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
}

.search-section {
  background: #ffffff;
  padding: 15px 20px;
  border-bottom: 1px solid #e2e8f0;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}

.search-input {
  flex: 1;
  height: 40px;
  padding: 0 15px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  font-size: 14px;
  color: #1e293b;
  transition: all 0.3s ease;

  &:focus {
    border-color: var(--primary-color);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  }

  &::placeholder {
    color: #94a3b8;
    font-size: 14px;
  }
}

.search-btn {
  padding: 10px 20px;
  background: linear-gradient(135deg, var(--primary-color), #0ea5e9);
  color: #ffffff;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  min-width: 70px;
  text-align: center;

  &:active {
    transform: scale(0.95);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  }
}

.order-content {
  flex: 1;
  padding: 20px 15px;
}

.order-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.order-item {
  background: #ffffff;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid #f1f5f9;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, var(--primary-color), #0ea5e9);
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);

    &::before {
      opacity: 1;
    }
  }
}

.order-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f1f5f9;
  position: relative;
}

.order-info {
  flex: 1;
}

.order-number {
  font-size: 15px;
  color: #1e293b;
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.order-time {
  font-size: 13px;
  color: #64748b;
  font-weight: 500;
}

.order-status {
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-align: center;
  min-width: 80px;
  transition: all 0.3s ease;

  .status-text {
    font-size: 13px;
    font-weight: 600;
  }

  &.status-pending {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #d97706;
    border: 1px solid #f59e0b;
  }

  &.status-confirmed {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    color: #1d4ed8;
    border: 1px solid #3b82f6;
  }

  &.status-completed {
    background: linear-gradient(135deg, #d1fae5, #bbf7d0);
    color: #059669;
    border: 1px solid #10b981;
  }

  &.status-cancelled {
    background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
    color: #6b7280;
    border: 1px solid #9ca3af;
  }

  &.status-cancelled {
    background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
    color: #6b7280;
    border: 1px solid #9ca3af;
  }
}

.order-body {
  margin-bottom: 15px;
}

.order-details {
}

.detail-item {
  display: block;
  font-size: 14px;
  color: #666666;
  margin-bottom: 5px;

  &:last-child {
    margin-bottom: 0;
  }
}

.order-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 15px;
  border-top: 1px solid #f0f0f0;
}

.order-amount {
  display: flex;
  align-items: center;
}

.amount-label {
  font-size: 14px;
  color: #666666;
}

.amount-value {
  font-size: 16px;
  color: #333333;
  font-weight: 600;
}

.order-actions {
  display: flex;
  gap: 10px;
}

.action-btn {
  padding: 6px 16px;
  border-radius: 6px;
  font-size: 12px;
  border: none;

  &.primary {
    background: #2196f3;
    color: #ffffff;
  }

  &.secondary {
    background: #f8f9fa;
    color: #666666;
    border: 1px solid #e0e0e0;
  }
}

.load-more {
  text-align: center;
  padding: 25px;
  margin: 10px 0;
}

.load-more-text {
  font-size: 14px;
  color: #64748b;
  font-weight: 500;
}

.no-more {
  text-align: center;
  padding: 25px;
  margin: 10px 0;
}

.no-more-text {
  font-size: 14px;
  color: #94a3b8;
  font-weight: 500;
}

.empty-state {
  padding: 60px 20px;
  text-align: center;
  background: #ffffff;
  border-radius: 16px;
  margin: 20px 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.go-shopping-btn {
  width: 180px;
  height: 45px;
  background: linear-gradient(135deg, var(--primary-color), #0ea5e9);
  border: none;
  border-radius: 24px;
  margin: 25px auto 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  }

  &:active {
    transform: translateY(0);
  }

  .btn-text {
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
  }
}
</style>
